<template>
  <div :class="`layout_tabbar ${menuFold ? 'fold' : ''}`">
    <div class="topBar_left">
      <el-icon :size="18" @click="toggleMenu">
        <component :is="menuFold ? 'Expand' : 'Fold'"></component>
      </el-icon>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item, index) in $route.matched"
          v-show="item.meta.title"
          :key="index"
          :to="{ path: item.path }"
        >
          <el-icon :size="20">
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.title }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="topBar_right">
      <FullScreen @click="toggleFullScreen" />
      <Refresh @click="refresh" />
      <Setting />
      <el-dropdown placement="bottom-end" trigger="click">
        <span class="userMenu">
          <el-avatar :src="userInfo?.avatar" />
          <span class="name">{{ userInfo?.userName }}</span>
          <el-icon><ArrowDown /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>Action 2</el-dropdown-item>
            <el-dropdown-item @click="loginOutClick">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { IUser } from '@/api/typings'
import { onMounted } from 'vue'
import { mapActions, storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import useCommonStore from '@/store/modules/common'
import useUserStore from '@/store/modules/user'

import { ElMessage } from 'element-plus'

// data数据
const $route = useRoute()
const $router = useRouter()
const { menuFold, refreshFlag } = storeToRefs(useCommonStore())
const { userInfo } = storeToRefs(useUserStore())
const { userLoginOut } = useUserStore()

onMounted(() => {
  console.log('menu load')
})

// toggleMenu方法
const toggleMenu = () => {
  menuFold.value = !menuFold.value
}

const loginOutClick = async () => {
  const res = await userLoginOut()
  console.log(res)
  if (res !== 'success') {
    return ElMessage({
      type: 'warning',
      message: '退出登录失败！',
    })
  }
  $router.push({
    path: '/login',
    query: {
      redirect: $route.path,
    },
  })
}

// refresh方法
const refresh = () => {
  refreshFlag.value = !refreshFlag.value
}

const toggleFullScreen = () => {
  const elem = document.documentElement // 获取文档元素
  if (!document.fullscreenElement) {
    elem.requestFullscreen().catch((err) => {
      console.error(`无法进入全屏模式: ${err.message}`)
    })
  } else {
    document.exitFullscreen()
  }
}
</script>

<style scoped lang="scss">
.layout_tabbar {
  position: fixed;
  height: $topBar-height;
  width: calc(100% - $sideBar-width);
  background-color: $bg-color;
  left: $sideBar-width;
  top: 0;
  display: flex;
  justify-content: space-between;
  &.fold {
    transition: all 100ms ease-in-out;
    width: calc(100% - $sideBar-min-width);
    left: $sideBar-min-width;
  }
  .topBar_left {
    display: flex;
    align-items: center;
    padding-left: 10px;
    .el-icon {
      cursor: pointer;
    }
    .el-breadcrumb {
      margin-left: 10px;
      :deep(.el-breadcrumb__inner) {
        display: flex;
        align-items: center;
      }
    }
  }
  .topBar_right {
    font-size: 20px;
    display: flex;
    align-items: center;
    & > svg {
      background: #fff;
      border-radius: 50%;
      padding: 5px;
      box-sizing: border-box;
      width: 28px;
      margin-right: 10px;
      cursor: pointer;
    }
    .userMenu {
      display: flex;
      align-items: center;
      padding: 0 20px;
      outline: none;
      cursor: pointer;
      .el-avatar {
        width: 28px;
        height: 28px;
      }
      .name {
        margin-left: 10px;
      }
      .el-icon {
        width: 20px;
      }
    }
  }
}
</style>
